<template>
  <div>
    <!-- 修改 -->
    <el-dialog
      append-to-body
      title="修改"
      :visible.sync="data.dialogInfoFlag"
      width="580px"
      @close="handleClose"
      @opened="openDialog"
    >
      <el-form :model="data.form" label-width="70px" ref="addForm">
        <el-form-item label="分类：" prop="category">
          <el-select v-model="data.form.categoryID" placeholder="请选择">
            <el-option
              v-for="item in data.categoryOption"
              :key="item.id"
              :label="item.category_name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标题：" prop="title">
          <el-input
            v-model="data.form.title"
            placeholder="请输入标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="概况：" prop="content">
          <el-input
            type="textarea"
            rows="4"
            v-model="data.form.content"
            placeholder="请输入概况"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="subForm" :loading="data.subLoading">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { AddInfo } from "@/api/news";
import { GetInfoList, EditInfo } from "@/api/news";
import { reactive, ref, watchEffect } from "@vue/composition-api";

export default {
  name: "Info",
  // 单向数据流 父级 ==> 子级 不能反向修改
  props: {
    flag: {
      type: Boolean,
      default: false
    },
    category: {
      type: Array,
      default: () => []
    },
    id: {
      type: String,
      default: ""
    }
  },
  setup(props, { emit, root, refs }) {
    /**
     * 数据
     */
    const data = reactive({
      dialogInfoFlag: false,  // 弹窗标记
      form: {
        categoryID: "",
        title: "",
        content: ""
      },
      // 分类下拉
      categoryOption: [],
      // 按钮加载
      subLoading: false
    });

    /**
     * methods
     */
      // 关闭弹窗的回调
    const handleClose = () => {
        data.dialogInfoFlag = false;
        emit("update:flag", false);
        restForm();
      };

    // 打开弹窗的回调
    const openDialog = () => {
      data.categoryOption = props.category;
      getInfo();
    };
    const getInfo = () => {
      let requestData = {
        pageNumber: 1,
        pageSize: 10,
        id: props.id
      };
      GetInfoList(requestData).then(res => {
        let resData = res.data.data.data[0];
        data.form = {
          categoryID: resData.categoryId,
          title: resData.title,
          content: resData.content
        };
      }).catch(error => {
        console.log(error);
      });
    };
    const subForm = () => {
      if (!data.form.categoryID) {
        root.$message.warning("分类不能为空");
        return false;
      }
      if (!data.form.title) {
        root.$message.warning("标题不能为空");
        return false;
      }
      if (!data.form.content) {
        root.$message.warning("概况不能为空");
        return false;
      }
      data.subLoading = true;
      // 参数
      let requestData = {
        id: props.id,
        categoryId: data.form.categoryID,
        title: data.form.title,
        content: data.form.content
      };
      EditInfo(requestData).then(res => {
        console.log(res);
        let resData = res.data;
        if (resData.resCode === 0) {
          root.$message.success(resData.message);
        }
        handleClose();
        emit("getListEmit");
        data.subLoading = false;
      }).catch(error => {
        console.log(error);
        data.subLoading = false;
      });
    };

    // 清空表单
    const restForm = () => {
      refs["addForm"].resetFields();
    };

    /**
     * watch
     */
    watchEffect(() => data.dialogInfoFlag = props.flag);

    return {
      // reactive
      data,
      // methods
      handleClose, openDialog, subForm
    };
  }
};
</script>

<style lang="scss" scoped>

</style>
